<template>
  <el-form :model="formModel" class="register-form" ref="elFormCom" :rules="rules">
    <el-form-item prop="userName">
      <el-input
        v-model="formModel.userName"
        placeholder="请输入用户名"
        class="register-form-input"
      ></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        v-model="formModel.password"
        placeholder="请输入密码"
        class="register-form-input"
      ></el-input>
    </el-form-item>
    <el-form-item prop="confirmPassword">
      <el-input
        v-model="formModel.confirmPassword"
        placeholder="请再次确认密码"
        class="register-form-input"
      ></el-input>
    </el-form-item>
    <el-form-item class="register-form-selrole" :class="{ isSel: formModel.role?.roleId }">
      <el-button type="" class="register-form-selrole-btn register-form-btn" @click="selRole">
        <svg-icon icon-class="role" class="register-form-selrole__icon" />
        <span v-if="!formModel.role">请选择身份</span>
        <span v-else>{{ formModel.role.roleTitle }}</span>
      </el-button>
    </el-form-item>
    <el-form-item class="register-form-btns">
      <el-button type="primary" class="register-form-btn" @click="submit" :loading="props.loading"
        >立即注册</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, defineEmits, ref } from 'vue'
import { selectRole } from '@/components/SelectRole'
const emit = defineEmits(['submit'])
const elFormCom = ref()
const props = defineProps({
  loading: {
    type: Boolean,
    default: false,
  },
})

const formModel = reactive({
  userName: '',
  password: '',
  email: '',
  phonenumber: '',
  code: '',
  confirmPassword: '',
  role: null,
})
const rules = {
  userName: [
    {
      required: true,
      message: '请输入用户名',
      trigger: 'blur',
    },
    {
      message: '用户名由3-20位字母、数字、下划线组成',
      trigger: 'blur',
      validator: (rule, value) => {
        return /^[a-zA-Z0-9_]{3,20}$/.test(value)
      },
    },
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    },
    {
      message: '密码需包含至少一个数字和一个字母（可包含特殊字符，如 !@#$%^&*），长度需为 6-20 位',
      trigger: 'blur',
      validator: (rule, value) => {
        return /^(?=.*\d)(?=.*[a-zA-Z])[a-zA-Z0-9!@#$%^&*()\-+=]{6,20}$/.test(value)
      },
    },
  ],
  confirmPassword: [
    {
      required: true,
      message: '请再次确认密码',
      trigger: 'blur',
    },
    {
      message: '两次输入的密码不一致',
      trigger: 'blur',
      validator: (rule, value) => {
        return value === formModel.password
      },
    },
  ],
}

const selRole = () => {
  selectRole().then((res) => {
    formModel.role = res
  })
}

const submit = () => {
  elFormCom.value.validate((valid) => {
    if (valid) {
      emit('submit', formModel)
    }
  })
}
</script>

<style lang="scss">
.register-form {
  &-btns {
    margin-bottom: 0;
  }

  &-btn {
    width: 100%;
    height: 58px;
    font-size: 20px;
  }

  &-input {
    height: 58px;
    font-size: 16px;
  }

  &-selrole {
    &.isSel &-btn {
      color: var(--el-color-primary);
      background-color: #f7f3f3 !important;
    }
    &.isSel &-btn:hover {
      background-color: var(--el-color-primary) !important;
    }
    &-btn {
      border: none;
      background-color: #f7f3f3 !important;
      font-size: 16px;
      justify-content: flex-start;
      color: #a8abb2;
      transition: all 0.3s;
      &:hover {
        // color: var(--el-color-primary);
        background-color: var(--el-color-primary) !important;
        color: #fff !important;
      }
    }
    &__icon {
      margin-right: 10px;
    }
  }
}
</style>
